<!--
 * @Descripttion : 请输入描述信息
 * @Author       : zengye
 * @Date         : 2021-04-12 16:15:54
 * @Version      : 1.0.0
 * @LastEditors  : VS CODE
 * @LastEditTime : 2021-04-12 20:09:09
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../main.css">
</head>
<body>
    <!-- 按钮组 -->
    <button class="action-btn" onclick="exceAction(this)" data-event="bold" data-value="true">粗体</button>
    <button class="action-btn" onclick="exceAction(this)" data-event="formatBlock" data-value="p">p段落</button>
    <button class="action-btn" onclick="exceAction(this)" data-event="formatBlock" data-value="h1">h1</button>
    <button class="action-btn" onclick="exceAction(this)" data-event="formatBlock" data-value="h2">h2</button>
    <button class="action-btn" onclick="exceAction(this)" data-event="formatBlock" data-value="h3">h3</button>
    <button class="action-btn" onclick="exceAction(this)" data-event="formatBlock" data-value="h4">h4</button>
    <button class="action-btn" onclick="exceAction(this)" data-event="formatBlock" data-value="h4">h5</button>
    <button class="action-btn" onclick="exceAction(this)" data-event="formatBlock" data-value="h4">h6</button>
    <button class="action-btn" onclick="exceAction(this)" data-event="formatBlock" data-value="div">div</button>
    <div contenteditable="true" id="edit">
        
    </div>
    <script>
        // 操作函数
        function exceAction(self){
            console.log(self)
            if(!self) return false;
            var event = self.getAttribute('data-event')
            var val = self.getAttribute('data-value') || true
            var bool = document.execCommand(event,false,val);
            console.log(`操作的命令行：${event} ${val}，值为：${bool}`)
        }
    </script>
</body>
</html>